<template>
  <view class="page">
	

    <!-- 快速申请卡片 -->
    <uni-card
      margin="15rpx"
      padding="20rpx"
      spacing="0"
      class="quick-apply"
    >
      <view class="quick-apply-body">
        <text class="quick-apply-title">快速申请用车</text>
        <text class="quick-apply-tip">简单填写即可申请车辆</text>
        <button class="quick-apply-btn" @click="toApply">立即申请</button>
      </view>
    </uni-card>

    <!-- 通知公告卡片 -->
	 <uni-card
	   margin="15rpx"
	   padding="0"
	   spacing="0"
	   class="notification"
	 >
	   <view slot="title" class="notification-header">
		 <text>通知公告</text>
	   </view>
	 
	   <uni-list>
		 <uni-list-item
		   v-for="(item, index) in notices"
		   :key="index"
		   :title="item.title"
		   :note="item.plainContent"   
		   clickable
		   @click="toNoticeDetail(item)"
		 />
	   </uni-list>
	 </uni-card>
	
		<u-tabbar
			  :value="currentTab"
			 
			  :placeholder="false"
			  :safeAreaInsetBottom="false"
			>
			 <u-tabbar-item v-for="(item, index) in tabBarList" :key="index" :text="item.text" :name="item.text"
			   @click="handTab(item)">
			    <image
			        class="bar_img"
			        slot="active-icon"
			        :src="item.selectedIconPath"
			      ></image>
			      <image
			        class="bar_img"
			        slot="inactive-icon"
			        :src="item.iconPath"
			      ></image>
			  </u-tabbar-item>
			
			</u-tabbar>
			

  </view>
</template>

<script>
export default {
  data() {
    return {
		
	currentTab:'首页',
	tabBarList: this.$store.state.dynamicTabbar,
      notices: [

		]
    };
  },
  methods: {
    async toApply() {
		
		uni.navigateTo({ url: '/pages/apply/apply' });
		
    },

	
	handTab(row) {
		uni.switchTab({
			url: row.pagePath
		})
	},
	
  /* 新增：跳转到通知详情 */
  toNoticeDetail(item) {
    uni.navigateTo({
      url: '/pages/noticeDetail/noticeDetail?item=' +
           encodeURIComponent(JSON.stringify(item))
    });
  },

  /* 获取通知时顺便生成纯文本摘要 */
		async getNotice() {
		  const { data } = await uni.$http.get('/sys/notification/page', {
			pageNo: 1,
			pageSize: 5
		  });
		  const LIMIT = 30;   // 阈值，可随意调整
		  this.notices = data.data.data.rows.map(n => {
			const plain = n.content
			  .replace(/<[^>]+>/g, '')
			  .replace(/\s+/g, ' ')
			  .trim();
			return {
			  ...n,
			  // 只有超出阈值才加 ...
			  plainContent:
				plain.length > LIMIT
				  ? plain.slice(0, LIMIT) + '...  ·  ' + n.createTime.slice(0, 16)
				  : plain + ' \n ' + n.createTime.slice(0, 16)
			};
		  });
		}
	
  },
  
  onShow(){
  	  this.getNotice()
  }
  


};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 100rpx; // 为底部导航留空
  background-color: #f5f5f5;
}

.header {
  background-color: #07c160;
  color: #fff;
  text-align: center;
  padding: 30rpx 0;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
}

.quick-apply {
  text-align: center;

  .quick-apply-body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .quick-apply-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
  }

  .quick-apply-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .quick-apply-btn {
    background-color: #87CEEB;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    padding: 0 50rpx;
    line-height: 70rpx;
  }
}

.notification-header {
  font-size: 30rpx;
  font-weight: 600;
  padding: 20rpx;
}


.bar_img{
		width: 54rpx;
		height: 54rpx;
	}


</style>